<template>
  <div class="excelview">
    <topbar_back :back-url="backUrl" back-content="返回主界面"
                 :center-content="title" content-color="green" is-show-center="true"></topbar_back>
    <div class="excel">
      <div class="row" v-for="(item,index) in content" :key="index">
        <div class="left" :class="{left_lastChild : index === content.length-1}">
          <span class="text">{{item.studentId}}</span>
        </div>
        <div class="middle" :class="{middle_lastChild : index === content.length-1}">
          <span class="text">{{item.name}}</span>
        </div>
        <div class="right" :class="{right_lastChild : index === content.length-1}">
          <span class="text">{{item.college}}</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import topbarBack from '../../components/public/topbar_back'
export default {
  name: 'ExcelView',
  data () {
    return {
      backUrl: '',
      title: '',
      content: []
    }
  },
  components: {
    topbar_back: topbarBack
  },
  beforeRouteEnter (to, from, next) {
    // alert(from.name + '\n' + to.name)
    // 一定要调用next方法来resolve这个钩子
    // 在此处无法使用this，使用下面的方式来改变对象里面的值
    next(vm => {
      vm.backUrl = from.name
    })
  },
  mounted () {
    this.title = this.$route.params.title
    this.content = this.$route.params.content
    this.$route.meta.footChoose = this.$route.params.footChoose
  }
}
</script>

<style lang="scss" scoped>
  .excelview{
    width: 100%;
    height: 100%;
    background-color: #FFF;
    position: relative;
    .excel{
      position: absolute;
      top: 52%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      width: 90%;
      max-height: 85%;
      overflow: auto;
      border: px2rem(1) solid red;
      margin: 0 auto;
      border-radius: px2rem(20);
      border: px2rem(2) solid black;
      .row{
        /*border: px2rem(1) solid red;*/
        width: 100%;
        display: flex;
        @mixin text{
          font-size: $text-size-small;
          color: $text-color;
          line-height: px2rem(25);
        }
        @mixin column{
          border-bottom: px2rem(1) solid black;
          float: left;
          text-align: center;
        }
        @mixin lastChild{
          border-bottom: 0;
        }
        .left{
          @include column;
          border-right: px2rem(1) solid black;
          flex: 1;
          .text{
            @include text;
          }
        }
        .left_lastChild{
          @include lastChild;
        }
        .middle{
          flex: 1;
          border-right: px2rem(1) solid black;
          @include column;
          .text{
            @include text;
          }
        }
        .middle_lastChild{
          @include lastChild;
        }
        .right{
          flex: 2;
          @include column;
          .text{
            @include text;
          }
        }
        .right_lastChild{
          @include lastChild;
        }
      }
    }
  }
</style>
